<template>
  <w-view class="mm" gap=20>

    <w-vertical gap="0" height="*" class="index-root" :scroll-y="true">
      
      <div>{{radioChecked()}}</div>
      
      <!--      <w-toggle collapsed-icon=".f-i .f-i-caret-right" expanded-icon=".f-i .f-i-caret-down" align="between">
        <div>各种东东</div>
        <div>添加</div>
      </w-toggle> -->

      <w-buttonbar gap="10" height="50" :vertical="!true" align="right">
        <template #default>
          <w-button @click="save" text="save" face="primary" />
          <w-button @click="getValidError" text="getValidError"></w-button>
          <w-button @click="isModified" text="isModified"></w-button>
          <w-button @click="saveModified" text="saveModified"></w-button>
          <w-button text="新建任务" @click="create2" :dropHover="!true">
            <w-button text="积分公益" @click="create2"></w-button>
            <w-button text="志愿者活动">
              <w-button text="组织调用" @click="clickMenu"></w-button>
              <w-button text="组织类别" @click="save"></w-button>
            </w-button>
            <w-button text="志愿者活动2">
              <w-button text="组织调用2" @click="clickMenu"></w-button>
              <w-button text="组织类别2" @click="save"></w-button>
            </w-button>
          </w-button>
        </template>

      </w-buttonbar>

      <w-grid ref="form" gap=0 :scroll-y="!true" face="cell">

        <w-hidden name="hdn" :modelValue="data.hiddenValue"></w-hidden>
        
<!--        <w-text v-for="form in formDatas" :key="form.index"  :colspan="form.colspan" :label="{text: form.text}" :modelValue="form.value"></w-text>
 -->
        <w-switch :colspan="colspan" :label="{text: 'Switch'}" v-model="data.switchValue" checked-value="1"
          unchecked-value="0" />

        <!-- <w-jigsaw :colspan="4" :label="{text: 'Jigsaw'}" template="@/components/task/TaskJigsaw" /> -->

        <w-pickbox :colspan="colspan" :label="{text:'Pickbox'}" name="pickbox" v-model="data.pickBoxValue"
          template="@/components/task/TaskPickBox" :readonly="!true">
        </w-pickbox>

        <w-text :colspan="colspan" name="text" :model-value="data.textValue" :label="{text:'用户名'}" :readonly="!true"
          :required="true"
          :pattern="{value: /^\d+$/, trigger: 'blur', text: '请输入正确的手机号'}"
          :validate-handler="{value: validateHandler, trigger: 'blur'}"
        ></w-text>


        <w-dropbox :colspan="colspan" :label="{text:'Dropbox'}" name="dropbox" v-model="data.dropboxValue"
          :cancelable="!true" :multiple="true" template="@/components/task/TaskDropbox" :readonly="!true" @change="dropboxChange">
        </w-dropbox>


        <w-linkbox :colspan="colspan" :label="{text:'Linkbox'}" :readonly="!true" :strict="false" name="linkbox"
          template="@/components/task/TaskLinkbox" v-model="data.linkboxValue">
        </w-linkbox>

        <w-combobox :colspan="colspan" :label="{text:'Combobox'}" :readonly="!true" :required="true" :br="true" :multiple="true" name="combobox"
          template="@/components/task/TaskCombobox" v-model="data.comboboxValue" @change="comboboxChange" :validate-default="{trigger: 'blur'}"/>

        <w-pickbox :colspan="colspan" :label="{text:'AMapPicker'}" name="amappicker" v-model="AMapPickerValue"
          template="@/components/task/TaskAMapPicker" :readonly="!true">
        </w-pickbox>

        <w-range :colspan="colspan" :label="{text:'Range'}" :required="!true">
          <w-datepicker name="rangeSpinner1" format="yyyy-MM-dd" :required="!true" :validate-default="{trigger: 'blur'}"/>
          <w-datepicker name="rangeSpinner2" label="会议结束时间" format="yyyy-MM-dd"  :required="!true" :validate-default="{trigger: 'blur'}"/>
        </w-range>

        <w-spinner :colspan="colspan" :label="{text:'Spinner'}" name="spinner" model-value="-12" decimal="-1"
          @change="spinnerChange" step="10" :min-value="0" :max-value="20"/>

        <w-radiogroup :colspan="colspan" name="checkbox" :label="{text:'CheckboxGroup'}" :vertical="!true"
          :disabled="!disabled" @change="radioChange" v2-model="data.radioValue" :required="!true">
          <w-radio value="0" text="音乐"/>
          <w-radio value="1" text="体育"/>
          <w-radio value="2" text="美术"/>
          <w-radio value="3" text="绘画"/>
        </w-radiogroup>

        <w-datepicker :colspan="colspan" :label="{text:'startTime'}" name="startTime" format="yyyy-ww"
          modelValue="2021-02" input-width="*"
          :compare1="[{target: 'endTime', mode: '<', trigger: 'blur', text: '开始时间不能大于结束时间'},{target: 'rangeSpinner1', mode: '<', text: 'Range', trigger: 'blur'}]"
        />
           
        <w-datepicker :colspan="colspan" :label="{text:'startTime'}" name="endTime" format="yyyy-MM-dd"
          modelValue="2021-12-13" input-width="*"
          :compare="{target: 'startTime', mode: '>', trigger: 'blur'}"
           />

        <w-form :colspan="colspan" name="form" :label="{text:'说明'}" :required="!true" :model-value="formValue">李德胜</w-form>
        
        <w-textarea name="text" :label="{text:'内容'}" input-height="100"></w-textarea>

        <w-radiogroup :colspan="colspan" :pub="{name: 'radio'}" :label="{text:'RadioGroup'}" :required="true"
          :disabled="!disabled" :modelValue="radioValue">
          <w-radio value="0" text="music">
            <w-text name="radioText"></w-text>
          </w-radio>
          <w-radio value="1" text="sport">
            <w-text label="Spinner" name="radioSpinner" :required="true" />
          </w-radio>
        </w-radiogroup>

        <w-fileupload :colspan="colspan" name="fileupload" :label="{text:'上传文件'}" upload-limit="3" size-limit="100K"
          :readonly="!true" min-file-size="30B" :required="data.required"
          upload-src="swfupload/upload.php" download-src="aaa.sp?id=$id" :filter="data => data.data"
          v-model="fileuploadValue">
        </w-fileupload>

        <w-imageupload :colspan="colspan" :label="{text:'上传图片'}" upload-limit="3" size-limit="100K" name="imageupload"
          :readonly="!true" :required="true" upload-src="swfupload/upload.php" thumbnail-src="aa.sp?id=$id"
          v-model="imageuploadValue"></w-imageupload>



      </w-grid>

      <w-html>checkboxValue: {{checkboxValue}}, radioValue: {{radioValue}}, linkboxValue: {{data.linkboxValue}}
      </w-html>

      <w-horizontal align="between">
        <w-pagebar limit="10" size="100" :offset="pageOffset" face="simple" @click:item="pageChange" />
        <w-pagebar limit="10" size="1000" :offset="pageOffset" face="button" @click:item="pageChange" />

        <w-pagebar template="task/TaskPageBar" :offset="pageOffset" @click:item="search" face="mini" />
      </w-horizontal>
    </w-vertical>

  </w-view>
</template>

<script>
  import $ from '../dfish.js'

  export default {
    watch: {
      searchOrg(v) {
        console.log(v)
      }
    },
    data() {
      return {
        colspan: $.br.mobile ? -1 : 4,
        data: {
          switchValue: '1',
          textValue: '11',
          comboboxValue: '001',
          linkboxValue: '001',
          dropboxValue: '002',
          radioValue: '',
          dateValue: '2021-12-13',
        },
        datepickerValue: '2021-07-05 12:21',
        activeMenu: {},
        focusTR: '',
        checkboxValue: '1',
        radioValue: '0',
        disabled: true,
        pageOffset: 0,
        testValue: {
          text: 'fdd'
        },
        fileuploadValue: null,
        imageuploadValue: [{
            id: '001',
            name: 'xx.jpg',
            thumbnail: 'https://wx2.sinaimg.cn/mw690/bfcada65ly1gsjtvkywejj21kw23wb29.jpg'
          },
          {
            id: '002',
            name: 'flsekjelgkrlgerirbmdls.mp4',
            thumbnail: 'http://localhost/vue/img/002.jpg'
          },
        ],

        pickboxFocusID: '',
        pickBoxValue: [{
          value: '111',
          text: '鼓楼区'
        }],
        AMapPickerValue: {
          lng: '118.868856',
          lat: '25.421089',
          address: '福建省莆田市城厢区华亭镇院里'
        },
        pickboxTreePub: {
          on: {
            click: (e) => {
              let d = $(e).data
              this.pickBoxValue = {
                value: d.id,
                text: d.text
              }
              $.close(e)
            }
          }
        },
        treeList: {
          id: '100',
          icon: '.f-i-qq',
          text: '福建省',
          expanded: true,
          children: [{
              id: '110',
              text: '福州市',
              children: [{
                  id: '111',
                  text: '鼓楼区'
                },
                {
                  id: '112',
                  text: '晋安区'
                },
              ]
            },
            {
              id: '120',
              text: '厦门市'
            }
          ]
        },
        dropboxOptions: [{
            text: '音乐',
            value: '001'
          },
          {
            text: '美术',
            value: '002'
          },
          {
            text: '体育',
            value: '003'
          },
        ],
        formValue: null,
        formDatas: [
          {text: 'usr1', colspan: 6, index: 0},
          {text: 'usr2', colspan: 6, index: 1},
          {text: 'usr3', colspan: 6, index: 2},
        ],
        commands: {
          del(data, wg) {
            wg.data.id = 'F002'
          },
          'search': (args) => {
            console.log(args)
          },
        },
        hiddens: [{
            name: 'hdn1',
            value: 1
          },
          {
            name: 'hdn2',
            value: 2
          }
        ],
        res: {},
        rowList: [],
        tabs: [{
            id: 1,
            text: '111',
            status: 1,
          },
          {
            id: 2,
            text: '222'
          },
          {
            id: 3,
            text: '333'
          },
        ],
      }
    },
    methods: {
      radioChange(e) {
        this.data.required = !this.data.required
        console.log($.vm(e).fv('checkbox'))
      },
      chooseFile(e) {
        this.$refs.imageupload.chooseFile()
      },
      onload() {
        //console.log('onload')
      },
      create(e) {
        $.vm().cmd({
          type: 'Confirm',
          title: '标题',
          text: '123',
          icon: '.f-i .f-i-check',
          class: 'xmzy-confirm',
        })
      },
      create2(e) {
        $.vm().cmd({
          type: 'Loading',
          hide: true
        })
      },
      input(e, v) {
        console.log('input', v)
      },
      clickFileItem(e, item) {
        console.log(item)
      },
      clickImageItem(e, item) {
        $.previewImage([
          'https://wx3.sinaimg.cn/mw690/bfcada65ly1gsn1rrrdrnj21he37ke82.jpg',
          'https://wx2.sinaimg.cn/mw690/bfcada65ly1gsjtvkywejj21kw23wb29.jpg',
          'https://wx1.sinaimg.cn/mw690/bfcada65ly1gsifq5rcuij21042664qp.jpg',
        ], {
          current: 1
        })
      },
      success(res) {
        //this.res = res.data
      },
      uploadSuccess(data, target) {
        return data.data
      },
      save(e) {
        $(e).cmd({
          type: 'Submit',
          src: 'widget.php?act=save',
        }).then(data => {
          console.log(data)
        })
      },
      blur(e) {
        console.log(e)
      },
      getValidError(e) {
        console.log($.vm(event).fv('checkbox'))
      },
      isModified(a) {
        this.data.textValue = 's'
      },
      saveModified(a) {
        $.vm(this).saveModified()
      },
      removeEvent(a) {
        console.log('removeEvent')
      },
      spinnerChange(e, v) {
        //$(e).valid()
        let p = (8541 - v) / 8541
        console.log(3189 - (3189 * p))
      },
      clickMenu(e) {
        let w = $(e)
        console.log(w.$options.name)
      },
      pageChange(e, offset) {
        this.pageOffset = offset
      },
      comboboxChange(e, v) {
        //console.log(e, v)
      },
      dropboxChange(e, v) {
        console.log(v)
      },
      search(e, offset) {
        console.log('indexView search')
        this.pageOffset = offset
      },

      find(menus, menuId) {
        const _find = (menus) => {
          for (let v of menus) {
            if (v.menuId == menuId) return v
            if (v.children) {
              let r = _find(v.children)
              if (r) return r
            }
          }
        }
        return _find(menus)
      },
      validateHandler(v) {
        if (v == 'hello') {
          return 'xxx'
        }
      },
      closeButton(e) {
        this.tabs.splice(this.tabs.findIndex(v => 'page' + v.id == $(e).target), 1)
        this.$nextTick(() => {
          console.log($.docView.find('page1'))
        })
      },
      yes(e) {
        console.log($.vm(this).getPostData())
        //$(e).cmd('edit', 21)
        //console.log('indexView', dfish.vm(this))
      },
      no(e) {
        $(e).exec('save', [10])
      },
      edit(item) {

      },
      reload(row) {

      },
      changeSwitch(v) {
        return v == '001' ? '是' : '否'
      },
      radioChecked() {
        console.log('radioChecked')
      }
    },
    computed: {
      getText(a) {
        //return this.changeSwitch()
      },
    },
    mounted1() {
      $.config({
        defaultOptions: {
          'w-grid': {
            gap: 5
          },
          'w-dialog.large': {
            width: 1200
          }
        }
      })
      this.fileuploadValue = [{
          id: '001',
          name: 'abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabc - 副本.jpg'
        }, {
          id: '002',
          name: 'ggh.jpg'
        }],
        //$.ajax.post('widget.php?act=post-json', {id: 2}, {headers:{'Content-Type': 'application/json'}}).then(res => { console.log(res) })
        this.rowList = [{
            id: '001',
            name1: '擎天柱',
            name: {
              rowspan: 2,
              text: '<b>擎天柱</b>'
            },
            address: '<b>史前地球</b>1111111111111111111111111111111111111111111111111111111111111111111111',
            status: 1,
          },
          {
            id: '002',
            name: '威震天',
            address: '塞伯坦星',
          },
          {
            id: '003',
            name1: '大黄蜂',
            name: {
              colspan: 2,
              text: '大黄蜂大黄蜂大黄蜂大黄蜂大黄蜂大黄蜂大黄蜂大黄蜂大黄蜂'
            },
            address: '塞伯坦星'
          },
        ]
      //this.save(this)
    }
  }
</script>

<style>
  .xmzy-confirm .w-alert-head {
    background-color: rgb(233, 243, 253);
  }

  .xmzy-confirm .w-alert-move {
    padding-left: 20px;
    text-align: left;
  }

  .xmzy-confirm .w-alert-title {
    padding-top: 0;
    height: 40px;
    line-height: 40px;
  }
  
  .xmzy-confirm .w-alert-title:before {
    position: absolute;
    content: '';
    width: 5px;
    height: 14px;
    top: 13px;
    left: 10px;
    background-color: #3E89FA;
  }

  .xmzy-confirm .w-alert-close {
    margin: 7px 8px 0 0;
  }

  .xmzy-confirm .w-alert-body {
    padding-bottom: 20px;
  }

  .xmzy-confirm .w-alert-main {
    padding: 20px 40px;
  }

  .xmzy-confirm .w-alert-buttonbar {
    background-color: #fff;
    justify-content: center;
    height: 50px;
    border-top: 0;
    gap: 10px;
  }

  .xmzy-confirm .w-alert-button {
    flex: none;
    border: 1px solid #ddd;
  }
  
  .xmzy-confirm .w-alert-button.w-submitbutton {
    background: var(--w--focus-color);
    color: #fff;
  }
</style>
